<template>
  <div id="map"></div>
</template>

<script>
export default {
  data() {
    return {
      res: {},
      num: [],
      pro: []
    }
  },
  methods: {
    initChart() {
      var myChart = this.$echarts.init(document.getElementById("map"));
      myChart.setOption({
        title: {
          text: "各省报到人数",
          left: "center"
        },
        legend: {
          // top: 'bottom'
          orient: 'vertical',
          height: 400,
          x: 'right',
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)"//模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。
        },
        toolbox: {
          show: true,
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [50, 250],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: this.num
          }
        ]
      });
    },
    initData() {
      console.log(this.res);
      for (let key in this.res) {
        for (let ikey in this.res[key]) {
          console.log(ikey + " " + this.res[key][ikey]);
          this.pro.push(ikey);
          let t = {};
          t["value"] = this.res[key][ikey];
          t["name"] = ikey;
          // this.tmp[ikey] = this.res[key][ikey];
          this.num.push(t);
        }
      }
      console.log(this.num);

      this.num.sort(function (a, b) {
        return (b.value - a.value)
      });
      console.log(this.num);
    }
  },
  mounted() {
    this.$axios
      .get('../../public/testData/data.json')
      .then((res) => {
        this.res = res.data.data.province;
        this.initData();
        this.initChart();
      })
  },
};
</script>

<style>
#map {
  height: 90%;
  width: 100%;
}
</style>